<template>
  <div class="about">
    <!-- 海报图片 -->
    <div class="post-main" style="transform: translate3d(0px, 0px, 0px); ">
      <section class="post-member" >
        <a href="#">
          <img src="../assets/head.png" alt>
        </a>
        <p class="show-bill-title" style="display: none;">海报标题</p>
      </section>
    </div>
    <!--工作人员卡片-->

<!--    <el-button class="el-icon-refresh" style="margin-left: 20px" size="mini" @click="refresh">刷新</el-button>-->

    <el-tabs type="border-card" :stretch="true"
             v-loading="fullscreenLoading"
             element-loading-text="拼命加载中"
             element-loading-background="rgba(0, 0, 0, 0.8)"
             v-model="tabName"
             style="margin: 5vw;border-radius: 5px;margin-top: 0"
      v-if="false == fullscreenLoading">

      <el-tab-pane label="消息通知" name="one">
        <!--<div class="el-icon-date"
             style="text-align: left;margin-left: 1vw;margin-top: 10px;float: left;">
          预约历史信息</div>-->
        <div class="work-status" style="margin-left: 10px"
             :v-loading.fullscreen.lock="fullscreenLoading">
          <div class="status"></div>
          <div class="status-two"></div>
          <div class="status-text">统计:</div>
          <div class="status-text">已申请:{{people[0]}}</div>
          <div class="status-text">在填表{{people[1]+people[2]}}</div>
          <div class="status-text">待授课{{people[3]}}</div>
          <div class="status-text">已完结{{people[4]}}</div>
        </div>
        <el-table
            :data="tableData"
            style="width: 100%;border-radius: 5px;"

            stripe
            border>
          <el-table-column
              label="预约授课时间"
              align="center"
              width="130">
            <template slot-scope="scope" style="padding: 0;">
              <!--          <i class="el-icon-time"></i>-->
              <span style="margin-left: 0px">{{ scope.row.day }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="客户"
              align="center"
              width="100">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <!--              <p>姓名: {{ scope.row.name }}</p>-->
                <p>客户电话: {{ scope.row.number }}</p>
                <p>授课人群: {{ scope.row.serverName}}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium" style="padding: 0px 5px 0px 5px">{{ scope.row.customerName }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <!--<el-table-column
              label="老师电话"
              align="center"
              prop="phone"
              width="108">
          </el-table-column>-->
          <el-table-column label="操作\状态" align="center">
            <template slot-scope="scope" style="margin-left: 20px;">
              <el-popover
                  placement="bottom"
                  title="延迟时间"
                  :width="200"
                  trigger="click"
                  :content="scope.row.delayTime"
              >
                <template #reference>
                  <el-button v-if="null != scope.row.delayTime"
                             style="padding-left: 0px;padding-right: 0px;width: 60px;float:left;margin-right:2px;"
                             size="mini"
                             type="warning" plain
                             >已推迟</el-button>
                </template>
              </el-popover>

              <el-button v-if="1 == scope.row.status"
                         style="padding-left: 2px;padding-right: 2px;width: 55px;float: left;"
                         size="mini"
                         type="primary"  plain
                         @click="agreeApply(scope.row)">待同意</el-button>
              <el-button v-if="2 == scope.row.status"
                         style="padding-left: 1px;padding-right: 2px;width: 65px;float: left;"
                         size="mini"
                         type="success" plain
                        >用户填表中</el-button>
              <el-button v-if="3 == scope.row.status"
                         style="padding-left: 1px;padding-right: 2px;width: 60px;float: left;"
                         size="mini"
                         type="info" plain
                         @click="affirm(scope.row)">待您确认</el-button>

              <el-popover placement="right" :width="400" trigger="click">
                <template #reference>
                  <el-button v-if="4 == scope.row.status"
                             style="margin-right:2px; padding-left: 1px;padding-right: 5px;width: 60px;float: left;"
                             size="mini"
                             type="success"
                             @click="delayHandleOpen">推迟授课</el-button>
                </template>
                <el-form label-width="100px" >
                  <el-form-item label="推迟到">
                    <el-input v-model="delay" placeholder="年月日+上下午"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="delayActivity(scope.row)">确认</el-button>
                  </el-form-item>
                </el-form>
              </el-popover><!--
                  <el-dialog v-model="delayDialogVisible" title="Shipping address">
                        <el-input v-model="delay" autocomplete="off"></el-input>
                      <span class="dialog-footer">
                        <el-button @click="delayDialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="delayDialogVisible = false"
                        >确认</el-button
                        >
                      </span>
                  </el-dialog>-->
                <el-button v-if="4 == scope.row.status"
                         style="padding-left: 1px;padding-right: 2px;width: 55px;float: left;"
                         size="mini"
                         type="success"
                         @click="overActivity(scope.row)">完结授课</el-button>
              <el-button v-if="5 == scope.row.status"
                         style="padding-left: 1px;padding-right: 2px;width: 55px;float: left;"
                         size="mini"
                         type="success" plain disabled
              >已完结</el-button>
              <!-- <el-button
                   size="mini"
                   type="danger"
                   @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>
<!--        <h1>This is worker page</h1>-->
<!--        <div style="height: 300px"></div>-->
      </el-tab-pane>

      <el-tab-pane label="工作时间安排" name="two" style="padding: 0">
        <template #label>
          <span><i class="el-icon-date"></i> 工作时间安排</span>
        </template>
        <div class="work-time">
          <div v-for="(item, index) in workInfoList">
<!--            <div v-if="0 == item.status" class="time-item-one" style=""></div>-->
            <div class="time-item" >
              <div style="height: 4vw;font-size: 3vw;font-family: 'Avenir', Helvetica, Arial, sans-serif; padding-top: 1vw" v-if="0 == index">今天</div>
              <div style="height: 4vw;font-size: 3vw;font-family: 'Avenir', Helvetica, Arial, sans-serif; padding-top: 1vw" v-else-if="1 == index">明天</div>
              <div style="height: 4vw;font-size: 3vw;font-family: 'Avenir', Helvetica, Arial, sans-serif; padding-top: 1vw" v-else>{{ item.day }}</div>
              <el-divider></el-divider>

              <el-button v-if="1 == item.am" size="medium" type="primary" plain  @click="selectDelete(item,1)">上午</el-button>
              <el-button v-else size="medium" plain   @click="selectAdd(item,1)">上午</el-button>

              <el-button v-if="1 == item.pm" size="medium" type="primary" plain  @click="selectDelete(item,2)">下午</el-button>
              <el-button v-else size="medium" plain   @click="selectAdd(item,2)">下午</el-button>
              <!--          <el-divider v-if="1 == item.sign" style="width: 5vw;height: 1px; margin-right: 5vw">asdf</el-divider>-->
            </div>
          </div>
        </div>
        <div class="work-status" style="float: right;"
             :v-loading.fullscreen.lock="fullscreenLoading">
          <div class="status-one"></div>
          <div class="status-text">可预约</div>
          <div class="status-two"></div>
          <div class="status-text2">不可预约</div>
        </div>
<!--        <h1>This is worker page</h1>-->
      </el-tab-pane>
    </el-tabs>
    <h3 v-else>加载中......</h3>
    <div style="height: 100px;width: 100vw" ></div>


<!--    <h2>待开发</h2>-->
  </div>
</template>

<script>
export default {
  name: 'About',
  props: {
    msg: String,
  },
  data(){
    return{
      delay:'',
      delayDialogVisible: true,
      tabName: 'one',
      fullscreenLoading: true,
      userid: null,
      password: null,
      workInfoList:[],
      inedxByDay: {},
      tableData: [],
      message: [],
      people: []
      // message
    }
  },
  async created() {
    this.fullscreenLoading = true;
    setTimeout(() => {
      this.fullscreenLoading = false;
      if(2 != this.$parent.identity) {
        this.$message.error("请登录工作人员账号")
        this.$router.go(-1);
      }
      // this.message.error('登录失败,请重试!')
    }, 2000);


    var pId = window.sessionStorage.getItem('username')
    const { data: res } = await this.$http.post('duty/info/list2',{pId:pId});
    console.log(res)
    var date = new Date();
    var week = this.getDay(date.getDay())
    var moth = date.getMonth()+1
    var day = date.getDate()
    if(day>=0 && day<=9){
      day = '0'+day;
    }
    var toDay = date.getFullYear()+'-'+ moth +'-'+ day
    var len=21;
    for (var j = 0; j<len; j++){
      //存key
      this.inedxByDay[toDay] = j;
      //构造时间表项
      var item = {}
      item.status = 1
      item.ids = null
      item.sid = null
      item.pid = null
      item.allday = toDay
      item.day = toDay.slice(5,11) + ' ' + week;
      item.am = 0
      item.pm = 0
      if('日' == week) item.sign = 1
      else item.sign = 0
      this.workInfoList[j] = item
      /*if(0 == date.getDay()){
        var item = {}
        item.status = 0
        this.workInfoList[++j] = item;
        len++;
      }*/
      //构造查询结果规格化存储项，对每项的key赋值
      // this.sortTime[toDay] = []
      //时间加一天，并获取星期
      date = date.setDate(date.getDate()+1);
      date = new Date(date);
      var week = this.getDay(date.getDay())
      moth = date.getMonth()+1
      var day = date.getDate()
      if(day>=0 && day<=9){
        day = '0'+day;
      }
      toDay = date.getFullYear()+'-'+ moth +'-'+day
    }
    // console.log(this.inedxByDay)
    // console.log(this.workInfoList)
    for (var index=0,len = res.data.length; index<len; index++){
      // console.log(this.workInfoList[index])
      console.log(res.data[index])
      var key = this.inedxByDay[res.data[index].day]
      if(null == key) continue;
      this.workInfoList[key].ids = res.data[index].id;
      // this.workInfoList[key].sid = 1;
      // this.workInfoList[key].pid = window.sessionStorage.getItem('id')
      if(1 == res.data[index].time) {
        this.workInfoList[key].am=1;
      }
      if(2 == res.data[index].time) {
        this.workInfoList[key].pm=1;
      }
      // console.log(res.data[index].level)
      // console.log(key)
      // console.log(this.workInfoList[key].level)
      // this.sortTime[res.data[index].id].append(res.data[index])
    }
    this.tabName = window.sessionStorage.getItem('tabName')
    if(null == this.tabName) {
      this.tabName="one"
    }
    window.sessionStorage.removeItem('tabName')
    // console.log(this.tabName )

    //查询所有的预约信息列表
    for (var i=0;i<5;i++){
      this.message[i] = []
    }
    var id = window.sessionStorage.getItem('id')
    const { data: res2 } = await this.$http.post('order/info/list2', {pid:id})
    // this.tableData.splice(0)
    console.log(res2)
    for(var j = 0,len=res2.data.length; j < len; j++) {
      var item = {}
      item = res2.data[j]
      if(1 == res2.data[j].time) item.day = item.day+' 上午'
      if(2 == res2.data[j].time) item.day = item.day+' 下午'
      console.log(item)
      this.message[item.status-1].push(item)
      // this.tableData.push(item)
      // console.log(res[j])
      // if(res[j].pId==0) {
      // item.id = res[j].id
      // item.date = '（'+(j+1)+'）' + res[j].title
      item
      // }
    }
    console.log(this.message)
    for (var i=0;i<5;i++) {
      this.people[i] = this.message[i].length
      var index=i
      if(1 == i)index ==2
      if(2 == i)index ==1
      for (var j=0; j<this.message[index].length;j++)
         this.tableData.push(this.message[index][j])
    }

  },
  methods:{
    refresh(){
      location.reload();
    },
    getDay(days){
      switch(days) {
        case 1:
          return '一';
          break;
        case 2:
          return  '二';
          break;
        case 3:
          return  '三';
          break;
        case 4:
          return  '四';
          break;
        case 5:
          return  '五';
          break;
        case 6:
          return '六';
          break;
        case 0:
          return '日';
          break;
      }
    },
    selectDelete(item,option){
      this.$confirm('将'+item.allday+'设置为可以不可预约, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(async() => {
            console.log(item)
            var pid = window.sessionStorage.getItem('id')
            const { data: res } = await this.$http.post('duty/info/remove2',{
              pid: pid,
              time: option,
              day: item.allday
            });
            console.log(res)
            window.sessionStorage.setItem('tabName',this.tabName)
            console.log(this.tabName )
            location.reload()
            // this.fullscreenLoading = true
            // this.$nextTick(() => (this.fullscreenLoading = false))
            this.$message({
              type: 'success',
              message: '修改成功!',
            })
            location.reload();
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '失败',
            })
          })
    },

    selectAdd(item,option){
      this.$confirm('将'+item.allday+'设置为可以预约, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then( async() => {
        var pid = window.sessionStorage.getItem('id')
        console.log(pid)
        const { data: res } = await this.$http.post('duty/info/add',{
          day: item.allday,
          time: option,
          // sid: item.sid,
          pid: pid
        });
        if(0 != res.code) {
          this.$message.info(res.msg)
          return
        }
        console.log(res)
        this.$message({
          type: 'success',
          message: '修改成功!',
        })
        window.sessionStorage.setItem('tabName',this.tabName)
        console.log(this.tabName )
        location.reload()

      })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '失败',
        })
      })
    },
    agreeApply(item){
      this.$confirm('将同意该申请, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        console.log(item)
        const { data: res } = await this.$http.post('order/info/edit',{id:item.id,status:2})
        if(0 == res.code)
          this.$message({
            type: 'success',
            message: '成功!待用户填写表格'
          });
        location.reload();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消'
        });
      })
    },
    affirm(item){
      this.$confirm('将确认该授课, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        console.log(item)
        const { data: res } = await this.$http.post('order/info/edit',{id:item.id,status:4})
        if(0 == res.code) {
          this.$message({
            type: 'success',
            message: '成功!待您授课'
          });
          location.reload();
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消'
        });
      })
    },
    delayHandleOpen(){
      this.delayDialogVisible = true
      console.log(this.delayDialogVisible )
    },
    delayHandleClose(){

    },
    delayActivity(item){
      this.$confirm('确认延迟该活动?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        console.log(item)
        const { data: res } = await this.$http.post('order/info/delayOrder',{id:item.id,delayTime:this.delay})
        if(0 == res.code) {
          this.$message({
            type: 'success',
            message: '成功!已延迟'
          });
          location.reload();
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消'
        });
      })
    },
    overActivity(item){
      this.$confirm('确认完结该活动?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        console.log(item)
        const { data: res } = await this.$http.post('order/info/edit',{id:item.id,status:5})
        if(0 == res.code) {
          this.$message({
            type: 'success',
            message: '成功!已确认完结'
          });
          location.reload();
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消'
        });
      })
    },
  },
}
</script>

<style scoped>
/deep/ .el-tabs--border-card > .el-tabs__content {
  margin-top: 10px;
  padding: 0 !important;
  /*height: 0;*/
} {
  margin: 0;
  padding: 0;
  height: 0;
}
.work-time{
  width: 99%;
  margin-left: 1%;
  height: 100%;
  padding: 0;
  /*background-color: #42b983;*/
  display: flex;
  flex-wrap: wrap;
}

.time-item-one{
  width: 16vw;
  height: 21vw;
  margin: 0.8vw;
  margin-bottom: 6px;
  display: block;
  white-space: nowrap;
  /*background-color: aqua;*/
  margin-bottom: 5px;
  border-radius: 6px;
  background: #80ffff;
  box-shadow: inset 12px 12px 24px #7cf7f7,
  inset -12px -12px 24px #84ffff;
}

.time-item{
  width: 16vw;
  height: 21vw;
  margin: 0.8vw;
  margin-bottom: 6px;
  display: block;
  white-space: nowrap;
  /*background-color: aqua;*/
  margin-bottom: 5px;
  border-radius: 6px;
  background: #80ffff;
  box-shadow: inset 12px 12px 24px #7cf7f7,
  inset -12px -12px 24px #84ffff;
}
.time-item .el-divider{
  margin: 0;
}
.el-button{
  width: 16vw;
  height: 8vw;
  display: block;
  margin: 0;
  padding: 0;
  padding: 2vw 4vw 2vw 4vw;
}

.work-status{
  margin-right: 2vw;
  width: 60vw;
  display: flex;
}
.work-status{
  margin-right: 2vw;
  width: 80vw;
  display: flex;
}

.status-one {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #8cc0ff;
  margin-top: 12px;
  margin-left: 110px;
  display: inherit;
}

.status-two{
  width: 2px;
  height: 2px;
  border-radius: 2px;
  background-color: #ffffff;
  border-width: 0.5px;
  border: #c4c7cf;
  border-style: solid;
  margin-top: 12px;
  margin-left: 10px;
  display: inherit;
}

.status-text{
  margin-top: 6px;
  margin-left: 4px;
  width: 80px;
  font-size: small;
}
.status-text2{
  margin-top: 6px;
  margin-left: 4px;
  width: 65px;
  font-size: small;
}
.about .el-divider{
  margin-top: 2px;
  margin: 0;
}
</style>
